/**
 * @description  : 一键搜首页
 * @descriptionDetail : 一键搜首页
 * @copyright    : 浙江烟草
 * @author       : mc
 * @create       : 2022-11-03 17:36:06
 */
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar :isWhite="false" backText="返回" title="一键搜"></theme-navbar>
    <!-- #endif -->
    
    <!-- 背景图 -->
    <view class="key-img">
      <u-image width="182px" height="100%" :src="backSrc" mode="widthFix"></u-image>
    </view>
    <view class="content">
      <view class="key-search-lay u-m-b-34">
        <u-search
          height="88"
          class="key-search"
          shape="round"
          :disabled="true"
          :clearabled="true"
          :showAction="true"
          actionText="一键搜索"
          :animation="true"
          placeholder="请输入要查询的信息"
          v-model="searchKey"
          @custom="confirmQuery"
          @search="confirmQuery"
          @click="confirmQuery"
        ></u-search>
      </view>
      <view class="key-mess">
        请搜索指定内容
      </view>
      <view class="tag-space">
        <choice-tag :allowEmptyChoice="false" :customStyle="customStyle" :btnList="dataTypes" :single="false" :tapListener="tapListener"></choice-tag>
      </view>
    </view>
  </view>
</template>

<script> 
import choiceTag from '@/components/choice_tag.vue';
import {INFORMATION_ANALYSIS_DATA,} from "@/service/infoAnalysis/mapping/enum.js";
export default {
  components: { 
    choiceTag,
  },
  data() {
    return {
      backSrc:'/static/keySearch/cigar-logo.png',
      customStyle: {
        "margin-left": "5px",
        "margin-right": "5px",
        "padding-left": "20px",
        "padding-right": "20px",
        "margin-bottom": "10px",
      },
      dataTypes: INFORMATION_ANALYSIS_DATA, // 一键搜搜索内容
      searchKey:'',
      selCodes:'',
    };
  }, 
  mounted() {
  },
  methods: {
    // 查询
    confirmQuery(){
      let isCheckd = [];
      this.dataTypes.map(item => {
        item.isChoice && (isCheckd.push(item.code));
      });
      this.selCodes = isCheckd.join(',');
      this.$u.route('pages/keySearch/searchKey',{type:this.selCodes,});
    },
    // 监听多选操作
    tapListener(arr){
      let dataCode = [];
      if (arr.length > 0) {
        arr.forEach(item => {
          dataCode.push(item.code);
        });
      }
      this.selCodes = dataCode.join(",");
    },
  },
};
</script>

<style lang="scss" scoped>
.key-img{
  height: 250px;
}
.content{
  width:95%;
  margin:auto;
  .key-mess{
    margin: 48rpx auto 32rpx auto;
    font-size: 16px;
    color: #333;
  }
}
/deep/.u-image{
    margin: auto;
    display: flex;
    align-items: center;
}
/deep/.u-action-active{
  width:60px;
}
/deep/.mc-choice-btn-group {
  padding: 0px;
}
.tag-space{
	margin-left: -5px;
}
</style>
